<template>
  <div class="capsule">
    <template v-if="options.length>0">
      <div :class="['capsule-item', {active:item.value === (checked || options[0].value)}]"
           v-for="item in options"
           @click="handleChange(item)">
        {{item.label}}
      </div>
    </template>
  </div>
</template>
<script setup lang="ts">
import {ref} from "vue";

const checked = ref(0)
const isProcessing = ref(false);
interface CapsuleType{
  value:number|string,
  label:string
}
defineProps({
  options:{
    type:Array<CapsuleType>,
    default:[]
  }
})
const emit = defineEmits(['change'])
const handleChange = (value:CapsuleType) => {
  if(checked.value === value) return;// 如果当前选中的值与点击的选项相同，则直接返回，不执行后续操作
  if (isProcessing.value) return; // 如果正在处理，则直接返回，防止重复点击
  isProcessing.value = true; // 开始处理，禁用点击
  setTimeout(() => {
    isProcessing.value = false;
    checked.value = value.value;
    emit("change", value);
  }, 100); // 假设操作需要 300ms 完成
}
</script>

<style scoped>
  .capsule {
    display: flex;
    gap: 6px;
  }
  .capsule-item {
    padding: 5px 12px;
    border-radius: 32px;
  }
  .capsule-item.active{
    color: var(--color-primary);
    background-color: #e6f4ff;
  }
  .capsule-item:hover{
    cursor: pointer;
    background-color: #f5f5f5;
    transition: var(--transition);
  }
</style>